import Ajax from '../lib/ajax'
import crc32 from '../lib/crc32'
import { config } from '../data/config'
import data from '../data'
import getData from '../data/get'

// 选择值
let selectValue = ''

// 输入值
let inputValue = ''

// 索引
let keyValue = ''

// 输入框
const inputEl = document.createElement('input')
inputEl.style = `
height: 35px;
width: 300px;
padding: 0 5px;
outline: none;
`
// inputEl.setAttribute('placeholder', '请输入内容')

// 创建操作按钮组
function createGroup(el, modal, options, callback) {
    const btnGroup = document.createElement('p')
    btnGroup.style = `
        padding:10px;
        display: flex;
        justify-content: center;
    `

    // 按钮样式
    const btnStyle = `
        cursor: pointer;
        border-radius: 5px;
        color: white;
        padding: 10px;
        line-height: 1;
        border: none;
    `

    // 取消
    const cancelBtn = document.createElement('button')
    cancelBtn.innerText = options.cancelBtnName
    cancelBtn.style = `
        ${btnStyle}
        margin-right:10px;
        background: #bbb;
    `
    cancelBtn.addEventListener("click", function () {
        document.body.removeChild(modal)
    })
    btnGroup.appendChild(cancelBtn)

    // 确认
    const sureBtn = document.createElement('button')
    sureBtn.innerText = options.confirmBtnName
    sureBtn.style = `
        ${btnStyle}
        background: #456ff7;
    `
    sureBtn.addEventListener("click", function () {
        document.body.removeChild(modal)

        // 发送设置
        const url = `http://${config.ip}:${config.port}`
        const d = { language: selectValue, key: keyValue, value: inputValue }

        // 保存
        Ajax.post(url, d).then(() => {
            if (data[selectValue] == undefined) data[selectValue] = {}
            data[selectValue][keyValue] = inputValue
            callback(d)
        })
    })
    btnGroup.appendChild(sureBtn)

    // 挂载
    el.appendChild(btnGroup)
}

// 创建输入框
function createInput(el) {
    const inputBlock = document.createElement('p')
    inputBlock.style = `padding:10px;`

    inputEl.addEventListener("input", function (e) { inputValue = e.target.value })
    inputBlock.appendChild(inputEl)

    // 挂载
    el.appendChild(inputBlock)
}

// 更新输入框值
function updateInput() {
    inputValue = getData(selectValue, keyValue) || ''
    inputEl.value = inputValue
}

/**
 * 创建语言下拉选择列表 
 * @param {*} el 挂载元素
 * @param {string} code 选择语言code
 * @param {Array} list 选择语言列表
 */
function createSelect(el, code, list = []) {
    const selectBlock = document.createElement('p')
    selectBlock.style = `padding:10px;`

    const selectEl = document.createElement('select')
    selectEl.style = `
        height: 35px;
        width: 300px;
        padding: 0 5px;
        outline: none;
    `

    // 加载列表，选择状态
    selectValue = code ? code : list[0].code
    updateInput()

    // 选择options
    list.forEach(item => {
        const optionEl = document.createElement('option')
        // optionEl.setAttribute('placeholder', '请选择语言')
        optionEl.setAttribute('value', item.code)
        optionEl.selected = item.code === selectValue
        optionEl.innerText = item.name
        selectEl.appendChild(optionEl)
    })
    selectEl.addEventListener("change", function (e) {
        selectValue = e.target.value
        updateInput()
    })
    selectBlock.appendChild(selectEl)

    // 挂载
    el.appendChild(selectBlock)
}

// 翻译弹框
export default function dialog(options, key, base, callback) {
    keyValue = key

    // 模态框
    const modal = document.createElement('div')
    modal.style = `
        position: fixed;
        z-index: ${options.zIndex};
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0,0,0,0.2);
    `

    // 弹框容器
    const el = document.createElement('div')
    el.style = `
        background-color: white;
        padding: 10px;
        box-shadow: 3px 3px 20px #ccc;
        border-radius: 5px;
    `

    // 内容
    el.innerHTML = `
        <h3 style="text-align: center;font-weight: bold;font-size: 18px;">${options.title}</h3>
        <p style="padding:10px;margin: 10px;background-color: #f8f8f8;">key：${key}</p>
        <p style="padding:10px;margin: 10px;background-color: #f8f8f8;">base：${base}</p>
    `

    // 选择列表
    if (options.list && options.list.length) createSelect(el, options.code, options.list)

    // 输入框
    createInput(el)

    // 操作按钮
    createGroup(el, modal, options, callback)

    // 挂载到body
    modal.appendChild(el)
    document.body.appendChild(modal)
}
